<template>
	<div id="my-background-slides" ref="myBackgroundSlides">
		<figure v-for="v in props.srcs" :key="<string>v" :src="v" alt="" :style="{ background: 'url(' + v + ') center center / cover' }"></figure>
		<blockquote>
			<slot></slot>
		</blockquote>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";

const props = defineProps({
	srcs: { type: Array, default: [] },
});
const myBackgroundSlides = ref(null);

onMounted(() => {});
</script>

<style lang="scss" scoped>
@keyframes fade {
	5% {
		transform: scale(1.04);
		opacity: 1;
	}
	20% {
		opacity: 1;
		transform: scale(1.15);
	}
	25% {
		transform: scale(1.2);
		opacity: 0;
	}
}
#my-background-slides {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
	figure {
		position: absolute;
		opacity: 0;
		width: 100%;
		height: 100%;
		&:nth-child(1) {
			animation: fade 20s linear 0s infinite;
		}
		&:nth-child(2) {
			animation: fade 20s linear 5s infinite;
		}
		&:nth-child(3) {
			animation: fade 20s linear 10s infinite;
		}
		&:nth-child(4) {
			animation: fade 20s linear 15s infinite;
		}
	}
	blockquote {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>
